<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渠道和销售进度</title>
    <!-- 页面样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 字体样式 -->
    <link rel="stylesheet" href="./fonts/icomoon.css">
</head>

<body>
    <div class="viewport">
        <div class="column">
            <!--概览-->
            <div class="overview panel">
                <div class="inner">

                </div>
            </div>
            <!--监控-->
            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">故障设备监控</a>
                        <a href="javascript:;" data-index="1">异常设备监控</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">故障时间</span>
                            <span class="col">设备地址</span>
                            <span class="col">异常代码</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">20180701</span>
                                    <span class="col">11111111111111北京市昌平西路金燕龙写字楼</span>
                                    <span class="col">1000001</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190704</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000003</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20180701</span>
                                    <span class="col">北京市昌平区建路金燕龙写字楼</span>
                                    <span class="col">1000004</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000005</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000006</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建西路金燕龙写字楼</span>
                                    <span class="col">1000007</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000008</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000009</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000010</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="head">
                            <span class="col">异常时间</span>
                            <span class="col">设备地址</span>
                            <span class="col">异常代码</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">5555555555123北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000001</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190703</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190704</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190705</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190706</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190707</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190708</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190709</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 点位 -->
            <div class="point panel">
                <div class="inner">
                    <h3>点位分布统计</h3>
                    <div class="chart">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <h4>320,11</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    点位总数
                                </span>
                            </div>
                            <div class="item">
                                <h4>418</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 地图 -->
            <div class="map">
                <h3>
                    <span class="icon-cube"></span> 设备数据统计
                </h3>
                <div class="chart">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel">
                <div class="inner">
                    <h3>全国用户总量统计</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4>120,899</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    用户总量
                                </span>
                            </div>
                            <div class="item">
                                <h4>248</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 订单 -->
            <div class="order panel">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" data-key="day365" class="active">365天</a>
                        <a href="javascript:;" data-key="day90">90天</a>
                        <a href="javascript:;" data-key="day30">30天</a>
                        <a href="javascript:;" data-key="day1">24小时</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div class="item">
                            <h4>20,301,987</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                订单量
                            </span>
                        </div>
                        <div class="item">
                            <h4>99834</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                销售额(万元)
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 销售额 -->
            <div class="sales panel">
                <div class="inner">
                    <div class="caption">
                        <h3>销售额统计</h3>
                        <a href="javascript:;" class="active" data-type="year">年</a>
                        <a href="javascript:;" data-type="quarter">季</a>
                        <a href="javascript:;" data-type="month">月</a>
                        <a href="javascript:;" data-type="week">周</a>
                    </div>
                    <div class="chart">
                        <div class="label">单位:万</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <!-- 渠道 季度 -->
            <div class="wrap">
                <div class="channel panel">
                    <div class="inner">
                        <h3>渠道分布</h3>
                        <div class="data">
                            <div class="item">
                                <h4>39 <small>%</small></h4>
                                <span>
                                    <i class="icon-plane"></i>
                                    机场
                                </span>
                            </div>
                            <div class="item">
                                <h4>28 <small>%</small></h4>
                                <span>
                                    <i class="icon-bag"></i>
                                    商场
                                </span>
                            </div>
                        </div>
                        <div class="data">
                            <div class="item">
                                <h4>20 <small>%</small></h4>
                                <span>
                                    <i class="icon-train"></i>
                                    地铁
                                </span>
                            </div>
                            <div class="item">
                                <h4>13 <small>%</small></h4>
                                <span>
                                    <i class="icon-bus"></i>
                                    火车站
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="quarter panel">
                    <div class="inner">
                        <h3>一季度销售进度</h3>
                        <div class="chart">
                            <div class="box">
                                <div class="gauge"></div>
                                <div class="label">75<small> %</small></div>
                            </div>
                            <div class="data">
                                <div class="item">
                                    <h4>1,321</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #6acca3"></i>
                                        销售额(万元)
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>150%</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35"></i>
                                        同比增长
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 排行榜 -->
            <div class="top panel">
                <div class="inner">
                    <div class="all">
                        <h3>全国热榜</h3>
                        <ul>
                            <li>
                                <i class="icon-cup1" style="color: #d93f36;"></i> 可爱多
                            </li>
                            <li>
                                <i class="icon-cup2" style="color: #68d8fe;"></i> 娃哈啥
                            </li>
                            <li>
                                <i class="icon-cup3" style="color: #4c9bfd;"></i> 喜之郎
                            </li>
                        </ul>
                    </div>
                    <div class="province">
                        <h3>各省热销 <i class="date">// 近30日 //</i></h3>
                        <div class="data">
                            <ul class="sup">
                                <li>
                                    <span>北京</span>
                                    <span>25,179 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>河北</span>
                                    <span>23,252 <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>上海</span>
                                    <span>20,760 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>江苏</span>
                                    <span>23,252 <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>山东</span>
                                    <span>20,760 <s class="icon-up"></s></span>
                                </li>
                            </ul>
                            <!-- 显示省份对应的销售数据 -->
                            <ul class="sub">
                                <li><span></span><span> <s class="icon-up"></s></span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/rem.js"></script>
    <script src="./js/jquery_3.5.1.js"></script>
    <!-- 概览区域JS -->
    <script>
        // 概览数据
        var arr = [
            {
                value: 2190,
                colorStr: "#006cff",
                infoTitle: "设备总数"
            },
            {
                value: 3001,
                colorStr: "#6acca3",
                infoTitle: "运营设备"
            },
            {
                value: 190,
                colorStr: "#6acca3",
                infoTitle: "季度新增"
            },
            {
                value: 108,
                colorStr: "#ed3f35",
                infoTitle: "异常设备"
            },
        ];
        // 把后台的数据, 对应标签结构, 循环创建铺设到页面上
        arr.forEach(function (obj) {

            // 为这个对象 - 创建一套标签结构
            var theDiv = $(`<div class="item">
                        <h4>${obj.value}</h4>
                        <span>
                            <i class="icon-dot" style="color: ${obj.colorStr}"></i>
                            ${obj.infoTitle}
                        </span>
                    </div>`);
            console.log($(".overview .inner"));
            $(".overview .inner").append(theDiv);
        })

    </script>
    <!-- 监控区域JS -->
    <script>
        // a标签绑定点击事件
        $(".monitor .tabs a").click(function () {
            $(".monitor .content").hide().eq($(this).index()).show();
            $(this).addClass("active").siblings().removeClass("active");
        })

        // 无限循环 - 每个.marquee加自己的孩子, 分开写
        $(".monitor .marquee").each(function (index, val) {
            var child = $(val).children().clone(); //克隆一份
            $(val).append(child);
        });

        // 原生JS数组里的方法 - forEach
        // JQ对象集合的方法  - each
    </script>
    <!-- 引入echars.js -->
    <script src="./js/echarts.js"></script>
    <!-- 点位分布 -->
    <script>
        // 1. 初始化echarts管家对象
        var echartsObj = echarts.init($(".point .pie")[0])
        // 2. 准备配置对象
        var option = {
            // title: {
            //     text: '南丁格尔玫瑰图',
            //     subtext: '纯属虚构',
            //     left: 'center'
            // },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            // legend: {
            //     left: 'center',
            //     top: 'bottom',
            //     data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
            // },
            // toolbox: {
            //     show: true,
            //     feature: {
            //         mark: {show: true},
            //         dataView: {show: true, readOnly: false},
            //         magicType: {
            //             show: true,
            //             type: ['pie', 'funnel']
            //         },
            //         restore: {show: true},
            //         saveAsImage: {show: true}
            //     }
            // },
            series: [
                {
                    // name: '半径模式', 
                    name: "销量",
                    type: 'pie',
                    radius: ["10%", "70%"], // 数组的第一项是内半径，第二项是外半径
                    center: ['50%', '50%'], // 中心点坐标
                    roseType: 'radius', // 是否展示成南丁格尔图，通过半径区分数据大小
                    label: { // 饼图图形上的文本标签，
                        // show: false
                        show: true,
                        fontSize: 10
                    },
                    // labelLine: { // 连线长度
                    //     length: 10,
                    //     length2: 50
                    // },
                    // emphasis: { // 高亮的扇区和标签样式
                    //     label: {
                    //         show: true
                    //     }
                    // },
                    data: [{ value: 20, name: '云南' },
                    { value: 26, name: '北京' },
                    { value: 24, name: '山东' },
                    { value: 25, name: '河北' },
                    { value: 20, name: '江苏' },
                    { value: 25, name: '浙江' },
                    { value: 30, name: '四川' },
                    { value: 42, name: '湖北' }
                    ]
                },
                // {
                //     name: '面积模式',
                //     type: 'pie',
                //     radius: [30, 110],
                //     center: ['75%', '50%'],
                //     roseType: 'area',
                //     data: [
                //         {value: 10, name: 'rose1'},
                //         {value: 5, name: 'rose2'},
                //         {value: 15, name: 'rose3'},
                //         {value: 25, name: 'rose4'},
                //         {value: 20, name: 'rose5'},
                //         {value: 35, name: 'rose6'},
                //         {value: 30, name: 'rose7'},
                //         {value: 40, name: 'rose8'}
                //     ]
                // }
            ],
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
        };

        // 3. 把配置对象 - 传入到echarts管家中
        echartsObj.setOption(option);

    </script>
    <!-- 中国地图数据的引入-集成到echarts -->
    <script src="./js/china.js"></script>
    <script>
        var geoCoordMap = {
            '新疆玛纳斯基地': [86.22, 44.30],
            '九江': [116.00, 29.70],
            '新乡': [116.402217, 35.311657],
            ' ': [79.92, 37.12],
            '  ': [86.85, 47.70],
            '若羌县': [88.17, 39.02],
            '上海': [121.4648, 31.2891],
            '东莞': [113.8953, 22.901],
            '东营': [118.7073, 37.5513],
            '中山': [113.4229, 22.478],
            '临汾': [111.4783, 36.1615],
            '临沂': [118.3118, 35.2936],
            '丹东': [124.541, 40.4242],
            '丽水': [119.5642, 28.1854],
            '乌鲁木齐': [87.9236, 43.5883],
            '佛山': [112.8955, 23.1097],
            '保定': [115.0488, 39.0948],
            '兰州': [103.5901, 36.3043],
            '包头': [110.3467, 41.4899],
            '北京': [116.4551, 40.2539],
            '北海': [109.314, 21.6211],
            '南京': [118.8062, 31.9208],
            '南宁': [108.479, 23.1152],
            '南昌': [116.0046, 28.6633],
            '南通': [121.1023, 32.1625],
            '厦门': [118.1689, 24.6478],
            '台州': [121.1353, 28.6688],
            '合肥': [117.29, 32.0581],
            '呼和浩特': [111.4124, 40.4901],
            '咸阳': [108.4131, 34.8706],
            '哈尔滨': [127.9688, 45.368],
            '唐山': [118.4766, 39.6826],
            '嘉兴': [120.9155, 30.6354],
            '大同': [113.7854, 39.8035],
            '大连': [122.2229, 39.4409],
            '天津': [117.4219, 39.4189],
            '太原': [112.3352, 37.9413],
            '威海': [121.9482, 37.1393],
            '宁波': [121.5967, 29.6466],
            '宝鸡': [107.1826, 34.3433],
            '宿迁': [118.5535, 33.7775],
            '常州': [119.4543, 31.5582],
            '广州': [113.5107, 23.2196],
            '廊坊': [116.521, 39.0509],
            '延安': [109.1052, 36.4252],
            '张家口': [115.1477, 40.8527],
            '徐州': [117.5208, 34.3268],
            '德州': [116.6858, 37.2107],
            '惠州': [114.6204, 23.1647],
            '成都': [103.9526, 30.7617],
            '扬州': [119.4653, 32.8162],
            '承德': [117.5757, 41.4075],
            '拉萨': [91.1865, 30.1465],
            '无锡': [120.3442, 31.5527],
            '日照': [119.2786, 35.5023],
            '昆明': [102.9199, 25.4663],
            '杭州': [119.5313, 29.8773],
            '枣庄': [117.323, 34.8926],
            '柳州': [109.3799, 24.9774],
            '株洲': [113.5327, 27.0319],
            '武汉': [114.3896, 30.6628],
            '汕头': [117.1692, 23.3405],
            '江门': [112.6318, 22.1484],
            '沈阳': [123.1238, 42.1216],
            '沧州': [116.8286, 38.2104],
            '河源': [114.917, 23.9722],
            '泉州': [118.3228, 25.1147],
            '泰安': [117.0264, 36.0516],
            '泰州': [120.0586, 32.5525],
            '济南': [117.1582, 36.8701],
            '济宁': [116.8286, 35.3375],
            '海口': [110.3893, 19.8516],
            '淄博': [118.0371, 36.6064],
            '淮安': [118.927, 33.4039],
            '深圳': [114.5435, 22.5439],
            '清远': [112.9175, 24.3292],
            '温州': [120.498, 27.8119],
            '渭南': [109.7864, 35.0299],
            '湖州': [119.8608, 30.7782],
            '湘潭': [112.5439, 27.7075],
            '滨州': [117.8174, 37.4963],
            '潍坊': [119.0918, 36.524],
            '烟台': [120.7397, 37.5128],
            '玉溪': [101.9312, 23.8898],
            '珠海': [113.7305, 22.1155],
            '盐城': [120.2234, 33.5577],
            '盘锦': [121.9482, 41.0449],
            '石家庄': [114.4995, 38.1006],
            '福州': [119.4543, 25.9222],
            '秦皇岛': [119.2126, 40.0232],
            '绍兴': [120.564, 29.7565],
            '聊城': [115.9167, 36.4032],
            '肇庆': [112.1265, 23.5822],
            '舟山': [122.2559, 30.2234],
            '苏州': [120.6519, 31.3989],
            '莱芜': [117.6526, 36.2714],
            '菏泽': [115.6201, 35.2057],
            '营口': [122.4316, 40.4297],
            '葫芦岛': [120.1575, 40.578],
            '衡水': [115.8838, 37.7161],
            '衢州': [118.6853, 28.8666],
            '西宁': [101.4038, 36.8207],
            '西安': [109.1162, 34.2004],
            '贵阳': [106.6992, 26.7682],
            '连云港': [119.1248, 34.552],
            '邢台': [114.8071, 37.2821],
            '邯郸': [114.4775, 36.535],
            '郑州': [113.4668, 34.6234],
            '鄂尔多斯': [108.9734, 39.2487],
            '重庆': [107.7539, 30.1904],
            '金华': [120.0037, 29.1028],
            '铜川': [109.0393, 35.1947],
            '银川': [106.3586, 38.1775],
            '镇江': [119.4763, 31.9702],
            '长春': [125.8154, 44.2584],
            '长沙': [113.0823, 28.2568],
            '长治': [112.8625, 36.4746],
            '阳泉': [113.4778, 38.0951],
            '青岛': [120.4651, 36.3373],
            '韶关': [113.7964, 24.7028]
        };

        var BJData = [
            [{
                name: '新乡'
            }, {
                name: '新乡',
                value: 200
            }],
            [{
                name: '新乡'
            }, {
                name: '呼和浩特',
                value: 90
            }],
            [{
                name: '新乡'
            }, {
                name: '哈尔滨',
                value: 90
            }],
            [{
                name: '新乡'
            }, {
                name: '石家庄',
                value: 90
            }],
            [{
                name: '新乡'
            }, {
                name: '昆明',
                value: 30
            }],
            [{
                name: '新乡'
            }, {
                name: '北京',
                value: 100
            }],
            [{
                name: '新乡'
            }, {
                name: '长春',
                value: 40
            }],
            [{
                name: '新乡'
            }, {
                name: '重庆',
                value: 40
            }],
            [{
                name: '新乡'
            }, {
                name: '贵阳',
                value: 50
            }],
            [{
                name: '新乡'
            }, {
                name: '南宁',
                value: 30
            }],
            [{
                name: '新乡'
            }, {
                name: '济南',
                value: 10
            }],
            [{
                name: '新乡'
            }, {
                name: '太原',
                value: 40
            }],
            [{
                name: '新乡'
            }, {
                name: '西安',
                value: 60
            }],
            [{
                name: '新乡'
            }, {
                name: '武汉',
                value: 50
            }],
            [{
                name: '新乡'
            }, {
                name: '合肥',
                value: 40
            }],
            [{
                name: '新乡'
            }, {
                name: '南京',
                value: 30
            }],
            [{
                name: '新乡'
            }, {
                name: '沈阳',
                value: 20
            }],
            [{
                name: '新乡'
            }, {
                name: '成都',
                value: 10
            }]
        ]; // 每个起点到终点地理名字

        var SHData = [
            [{
                name: '九江'
            }, {
                name: '九江',
                value: 200
            }],

            [{
                name: '九江'
            }, {
                name: '长沙',
                value: 95
            }],
            [{
                name: '九江'
            }, {
                name: '武汉',
                value: 30
            }],
            [{
                name: '九江'
            }, {
                name: '南昌',
                value: 20
            }],
            [{
                name: '九江'
            }, {
                name: '合肥',
                value: 70
            }],
            [{
                name: '九江'
            }, {
                name: '南京',
                value: 60
            }],
            [{
                name: '九江'
            }, {
                name: '福州',
                value: 50
            }],
            [{
                name: '九江'
            }, {
                name: '上海',
                value: 100
            }],
            [{
                name: '九江'
            }, {
                name: '深圳',
                value: 100
            }],

        ];

        var GZData = [
            [{
                name: '新疆玛纳斯基地'
            }, {
                name: '新疆玛纳斯基地',
                value: 200
            }],
            [{
                name: '新疆玛纳斯基地'
            }, {
                name: '  ',
                value: 90
            }],
            [{
                name: '新疆玛纳斯基地'
            }, {
                name: ' ',
                value: 40
            }],
            [{
                name: '新疆玛纳斯基地'
            }, {
                name: '呼和浩特',
                value: 90
            }],
            [{
                name: '新疆玛纳斯基地'
            }, {
                name: '昆明',
                value: 40
            }],
            [{
                name: '新疆玛纳斯基地'
            }, {
                name: '成都',
                value: 10
            }],
            [{
                name: '新疆玛纳斯基地'
            }, {
                name: '兰州',
                value: 95
            }],
            [{
                name: '新疆玛纳斯基地'
            }, {
                name: '银川',
                value: 90
            }],
            [{
                name: '新疆玛纳斯基地'
            }, {
                name: '西宁',
                value: 80
            }],

        ];

        var planePath = "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
        var convertData = function (data) { // 根据数组-对象起点和终点 - 到getCoordMap对象里换每个地址名字对应的坐标
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i]; // dataItem - 
                // [{
                //     name: '新乡'
                // }, {
                //     name: '新乡',
                //     value: 200
                // }]
                var fromCoord = geoCoordMap[dataItem[0].name]; // 起始地理坐标: [116.402217, 35.311657]
                var toCoord = geoCoordMap[dataItem[1].name]; // 终点坐标
                if (fromCoord && toCoord) { // 如果2个坐标都有
                    res.push([{
                        coord: fromCoord
                    }, {
                        coord: toCoord
                    }]);
                }
            }
            return res;
        };
        /*
        res = [
        [{coord: [116.12, 15.123]}, {coord: [189.21,9021]}],
        [{coord: [116.12, 15.123]}, {coord: [189.21,9021]}],
        [{coord: [116.12, 15.123]}, {coord: [189.21,9021]}],
        ]
        因为配置对象里需要这样的格式, 你就必须准备这样的格式
        // 整个数组是新乡相关的所有线的坐标数据
        // 每个小数组代表的一条线 起点坐标和终点坐标信息
        */

        var color = ['#3ed4ff', '#ffa022', '#a6c84c']; // 特效动画线段颜色
        // 每个元素对应的下面小数组里每个地址相关
        var series = [];
        [
            ['新乡', BJData],
            ['九江', SHData],
            ['新疆', GZData]
        ].forEach(function (item, i) { // item指的是['新乡', BJData]
            series.push({
                name: item[0] + ' Top101', // 系列名称: 
                type: 'lines', // 用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
                zlevel: 1, // 层级 (白色点)
                effect: { // 线特效的配置
                    show: true, // 显示线
                    period: 6, // 特效动画的时间，单位为 s
                    trailLength: 0.7, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
                    color: '#fff', // 特效标记的颜色
                    symbolSize: 3 // 特效标记的大小
                },
                lineStyle: { // 线段样式
                    normal: {
                        color: color[i],
                        width: 0,
                        curveness: 0.2 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。
                    }
                },
                data: convertData(item[1]) // 线数据集 convertData(BJData)
            }, {
                name: item[0] + ' Top102',
                type: 'lines',
                zlevel: 2,
                effect: { // 线特效的配置
                    show: true,
                    period: 6,
                    trailLength: 0, // // 地理上的圆点的配置
                    symbol: planePath, // 线两端的标记类型
                    symbolSize: 15
                },
                lineStyle: { // 地址和地理位置 -线段相关的样式
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.4,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            }, {
                name: item[0] + ' Top10',
                type: 'effectScatter', // 带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
                coordinateSystem: 'geo', // 在地理坐标系使用
                zlevel: 2,
                rippleEffect: { // 涟漪特效相关配置。
                    brushType: 'stroke' // 波纹的绘制方式
                },
                label: { // 图形上的文本标签， (地理位置圆圈旁边文字)
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}' // 系列(当前对象的系列里)的名字
                    }
                },
                symbolSize: function (val) {
                    return val[2] / 8; /*终点value值*/
                },
                itemStyle: {
                    normal: { // 圆点和线段用的是同一个数组
                        color: color[i]
                    }
                },
                data: item[1].map(function (dataItem) {
                    // dataItem
                    /*
                     [{
                        name: '新乡'
                    }, {
                        name: '新乡',
                        value: 200
                    }]
                    */
                    return {
                        name: dataItem[1].name, // 终点名字
                        // geoCoordMap[dataItem[1].name] - [102,134.21].concat(100)
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                    /*
                     {
                         name: "终点名字"
                         value: [182.123, 1832.123, 终点value值]
                     }
                    */
                })
            });
        });
        var echartsObj = echarts.init($(".map .geo")[0]);

        var option = {
            backgroundColor: '#080a20', // 图标的全屏背景颜色
            // title: {
            //     text: '模拟迁徙',
            //     subtext: '数据纯属虚构',
            //     left: 'left',
            //     textStyle: {
            //         color: '#fff'
            //     }
            // },
            tooltip: {
                trigger: 'item'
            },
            // legend: {
            //     orient: 'vertical',
            //     top: 'bottom',
            //     left: 'right',
            //     data: ['北京 Top10', '上海 Top10', '广州 Top10'],
            //     textStyle: {
            //         color: '#fff'
            //     },
            //     selectedMode: 'single'
            // },
            geo: { // 地理坐标系组件
                map: 'china', // 根据文档/百度跌倒地图的china.js数据(内部会向echarts注入地图数据)
                label: { // 图形上的文本标签，可用于说明图形的一些数据信息
                    emphasis: { // 高亮
                        show: false
                    },
                },
                roam: false, // 是否开启缩放
                itemStyle: { // 地图多边形的样式
                    normal: { // 默认
                        areaColor: '#132937', // 区域颜色
                        borderColor: '#0692a4' // 区域边框颜色
                    },
                    emphasis: { // 高亮
                        areaColor: '#0b1c2d' // 区域颜色
                    }
                },
                zoom: 1.2 // 缩放比例
            },
            series // 数据相关的地方 - 系列
        };

        echartsObj.setOption(option);
    </script>
    <!-- 用户统计echarts配置 -->
    <script>

        var echartsObj = echarts.init($(".users .bar")[0]);
        var item = {
            value: 1200,
            //自定义标签样式，仅对该数据项有效
            label: {

            },
            tooltip: {
                show: false
            },
            //自定义特殊 itemStyle，仅对该数据项有效
            itemStyle: {
                color: "#254065",
                opacity: 1
            }
        };

        var option = {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 定义渐变色起止位置 (右 下 左  上)
                // 0代表没有, 1代表有 (所以开始的位置是上边, 开始的颜色是下面的第一个color的值)
                [
                    // offset 渐变的颜色区域的偏移量
                    { offset: 0, color: '#00fffb' }, // 0 起始颜色
                    { offset: 1, color: '#0061ce' } // 1 结束颜色
                ]
            ),
            tooltip: { // 提示浮层组件
                trigger: 'item', // 放在身上才提示
                // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                //     type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                // }
            },
            grid: { // 直角坐标系当中配置
                top: '4%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
                show: true,
                borderWidth: 1,
                borderColor: 'rgba(0, 240, 255, 0.3)'
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
                    axisTick: { // 坐标轴刻度相关设置
                        show: false,
                        alignWithLabel: true // 可以保证刻度线和标签对齐
                    },
                    axisLabel: { // 刻度文字
                        color: '#4c9bfd'
                    },
                    axisLine: { // 线条颜色
                        lineStyle: {
                            color: 'rgba(0, 240, 255, 0.3)'
                        }
                    }
                }
            ],
            yAxis: [
                {

                    type: 'value', // 数值轴，适用于连续数据。
                    axisTick: { // 刻度线
                        show: false
                    },
                    axisLabel: { // 刻度文字
                        color: '#4c9bfd'
                    },
                    splitLine: { // 分割线
                        lineStyle: {
                            color: 'rgba(0, 240, 255, 0.3)'
                        }
                    },
                    axisLine: { // 线条颜色
                        lineStyle: {
                            color: 'rgba(0, 240, 255, 0.3)'
                        }
                    },

                }
            ],
            series: [ // 系列数据
                {
                    name: '用户统计',
                    type: 'bar',
                    barWidth: '60%',
                    data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
                }
            ]
        };
        echartsObj.setOption(option);
    </script>
    <!-- 订单JS -->
    <script>
        // 点击a只要切换h4的值即可 - 把值换上去
        // 这里不是用下标对应的, 而是用key来对应的 (新)
        // 1. 准备数据
        var data = {
            day365: { orders: '20,301,987', amount: '99834' },
            day90: { orders: '301,987', amount: '9834' },
            day30: { orders: '1,987', amount: '3834' },
            day1: { orders: '987', amount: '834' }
        }

        // 2. 给a标签绑定点击事件
        $(".order .filter a").click(function () {
            clearInterval(t);
            // 2.1 点击谁 - 从它的身上获取data-key的值
            var theObj = data[$(this).attr("data-key")];
            $(".order .data .item:eq(0) h4").html(theObj.orders); // 订单值改变了
            $(".order .data .item:eq(1) h4").html(theObj.amount); // 数量改变

            // 2.2 a高亮
            $(this).addClass("active").siblings().removeClass("active");

            // 4. 要给index同步 - 当前应该高亮的索引, 保证计时器++不会串
            index = $(this).index();
            console.log(index);
            // 5. 再创建计时器
            createInterval();
        })

        // 3. 计时器自动滚动
        // 思路: 声明一个全局变量index - 管理当前应该第几个a标签, 高亮(选中状态)
        // 计时器里每次让index++ -> 让对应的a标签高亮 -> 用a的data-key的值换出数据 -> 同时影响h4标签的值
        var index = 0; // 网页打开默认第0个是高亮的, 等2秒进入计时器, index++让下一个人高亮
        var t;
        function createInterval() {
            t = setInterval(function () {
                // 让index 往下+1
                index++;
                if (index == $(".order .filter a").length) {
                    index = 0;
                }
                // 3.1 先从a标签集合中, 取出对应的a标签
                var theA = $(".order .filter a").eq(index);
                // 3.2 高亮
                theA.addClass("active").siblings().removeClass("active");
                // 3.3 从a的身上取出绑定的数据的key
                var theKey = theA.attr("data-key");
                // 3.4 data对象里换出它所对应的数据
                var obj = data[theKey];
                // 3.5 把数据赋予到固定的h4标签中
                $(".order .data .item:eq(0) h4").html(obj.orders); // 订单值改变了
                $(".order .data .item:eq(1) h4").html(obj.amount); // 数量改变
            }, 2000);
        }
        createInterval();


    </script>
    <!-- 销售统计 -->
    <script>
        var echartObj = echarts.init($(".sales .line")[0]);
        var colors = ['#00f2f1', '#ed3f35'];
        var dataObj = { // 数据源(后台返回的数据)
            year: [
                [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ],
            quarter: [
                [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
                [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
            ],
            month: [
                [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
                [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
            ],
            week: [
                [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
                [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
            ]
        }

        var option = {
            color: colors,
            tooltip: {
                trigger: 'axis',
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {
                right: "10%",
                data: ['预期销售额', '实际销售额'],
                textStyle: {
                    color: "#4c9bfd"
                }
            },
            grid: {
                top: "20%",
                bottom: "20%",
                right: "5%",
                show: true,
                borderColor: "#012f4a"
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        // alignWithLabel: true,
                        show: false
                    },
                    axisLine: {
                        // onZero: false,
                        lineStyle: {
                            color: "#012f4a"
                        }
                    },
                    axisLabel: {
                        interval: 1,
                        color: "#4c9bfd"
                    },
                    boundaryGap: false,
                    // axisPointer: {
                    //     show: true,
                    //     // label: {
                    //     //     formatter: function (params) {
                    //     //         return '降水量  ' + params.value
                    //     //             + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    //     //     }
                    //     // }
                    // },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
                // {
                //     type: 'category',
                //     axisTick: {
                //         alignWithLabel: true
                //     },
                //     axisLine: {
                //         onZero: false,
                //         lineStyle: {
                //             color: colors[0]
                //         }
                //     },
                //     // axisPointer: {
                //     //     show: false,
                //     //     // label: {
                //     //     //     formatter: function (params) {
                //     //     //         return '降水量  ' + params.value
                //     //     //             + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                //     //     //     }
                //     //     // }
                //     // },
                //     data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
                // }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        color: "#4c9bfd"
                    },
                    axisTick: {
                        show: false
                    },
                    axisPointer: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#012f4a"
                        }

                    },
                    splitLine: {
                        lineStyle: {
                            color: "#012f4a"
                        }
                    }
                }
            ],
            series: [
                {
                    name: '预期销售额',
                    type: 'line',
                    // xAxisIndex: 1,
                    smooth: true,
                    data: dataObj.year[0]
                },
                {
                    name: '实际销售额',
                    type: 'line',
                    smooth: true,
                    data: dataObj.year[1]
                }
            ]
        };

        echartObj.setOption(option);

        // // JS部分点击切换和自动切换 - 有了数据, 根据点击改变option的data
        // // 9.1 给年/季/月/周 - 这几个文字绑定点击事件
        // $(".sales .caption a").click(function () {
        //     // 9.2 点击获取a身上的data-type的值, 作为key, 从dataObj数据对象里提取对应的图表数据数组
        //     var dataArr = dataObj[$(this).attr("data-type")];
        //     // 9.3 给option对象里的series下的2个对象的data重新赋值
        //     option.series[0].data = dataArr[0];
        //     option.series[1].data = dataArr[1];
        //     // 9.4 重新设置 - 让图标重新绘制
        //     echartObj.setOption(option);
        //     // 9.5 高亮修改
        //     $(this).addClass("active").siblings().removeClass("active");

        //     salesIndex = $(this).index() - 1;
        // })

        // // 9.6 自动切换
        // var salesIndex = 0; // 控制当前应该第几个a标签高亮 - 切换对应的第几套数据
        // var salesTimer; // 保存唯一的一个计时器 (注意变量名不要重复)
        // salesTimer = setInterval(function () {
        //     salesIndex++; // 往下走一位
        //     if (salesIndex == $(".sales .caption a").length) {
        //         salesIndex = 0;
        //     }
        //     // 9.7 高亮 - 用索引换出当前应该高亮的a标签, 设置样式

        //     $(".sales .caption a").eq(salesIndex).addClass("active").siblings().removeClass("active");
        //     // 9.8 下面的图表设置数据
        //     var dataArr = dataObj[$(".sales .caption a").eq(salesIndex).attr("data-type")];
        //     // 9.9 给option对象里的series下的2个对象的data重新赋值
        //     option.series[0].data = dataArr[0];
        //     option.series[1].data = dataArr[1];
        //     // 9.10 重新设置 - 让图标重新绘制
        //     echartObj.setOption(option);
        // }, 2000);


        // // 9.11 鼠标移入 - 停止计时器 / 鼠标移出 - 再创建计时器
        // $(".sales").hover(function () {
        //     clearInterval(salesTimer);
        // }, function () {
        //     salesTimer = setInterval(function () {
        //         salesIndex++; // 往下走一位
        //         if (salesIndex == $(".sales .caption a").length) {
        //             salesIndex = 0;
        //         }
        //         // 9.7 高亮 - 用索引换出当前应该高亮的a标签, 设置样式

        //         $(".sales .caption a").eq(salesIndex).addClass("active").siblings().removeClass("active");
        //         // 9.8 下面的图表设置数据
        //         var dataArr = dataObj[$(".sales .caption a").eq(salesIndex).attr("data-type")];
        //         // 9.9 给option对象里的series下的2个对象的data重新赋值
        //         option.series[0].data = dataArr[0];
        //         option.series[1].data = dataArr[1];
        //         // 9.10 重新设置 - 让图标重新绘制
        //         echartObj.setOption(option);
        //     }, 2000);
        // });
        // 初级程序员


        // 对于上面的优化
        // JS部分点击切换和自动切换 - 有了数据, 根据点击改变option的data
        // 9.1 给年/季/月/周 - 这几个文字绑定点击事件
        $(".sales").on("click", ".caption a", function () {
            // 9.2 点击获取a身上的data-type的值, 作为key, 从dataObj数据对象里提取对应的图表数据数组
            // 9.3 给option对象里的series下的2个对象的data重新赋值
            [option.series[0].data, option.series[1].data] = dataObj[$(this).attr("data-type")];
            // 9.4 重新设置 - 让图标重新绘制
            echartObj.setOption(option);
            // 9.5 高亮修改
            $(this).addClass("active").siblings().removeClass("active");
            salesIndex = $(this).index() - 1;
        })

        // 9.6 自动切换
        var salesIndex = 0; // 控制当前应该第几个a标签高亮 - 切换对应的第几套数据
        var salesTimer; // 保存唯一的一个计时器 (注意变量名不要重复)
        function createTimer() {
            salesTimer = setInterval(function () {
                salesIndex++; // 往下走一位
                salesIndex == $(".sales .caption a").length && (salesIndex = 0);
                // 优化: 从a标签, 调用它自己绑定的click事件
                $(".sales .caption a").eq(salesIndex).click();
            }, 2000);
        }
        createTimer();


        // 9.11 鼠标移入 - 停止计时器 / 鼠标移出 - 再创建计时器
        $(".sales").hover(function () {
            clearInterval(salesTimer);
        }, function () {
            createTimer();
        });
    </script>
    <!-- 销售进度 -->
    <script>
        (function () {
            var echartsObj = echarts.init($(".quarter .gauge")[0]);
            var option2 = {
                // tooltip: {
                //     trigger: 'item',
                //     formatter: '{a} <br/>{b}: {c} ({d}%)'
                // },
                // legend: {
                //     orient: 'vertical',
                //     left: 10,
                //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                // },
                series: [
                    {
                        name: '销售进度',
                        type: 'pie',
                        radius: ['130%', '150%'],
                        center: ['50%', '80%'],
                        // avoidLabelOverlap: false,
                        label: {
                            show: false,
                            // position: 'center'
                        },
                        emphasis: { // 高亮
                            label: {
                                show: false,
                                // fontSize: '30',
                                // fontWeight: 'bold'
                            }
                        },
                        hoverAnimation: false,
                        startAngle: 180,
                        // labelLine: {
                        //     show: false
                        // },
                        data: [{
                            value: 100,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    // 右 下 左  上
                                    0, 0, 0, 1, [
                                    { offset: 0, color: '#00fffb' }, // 0 起始颜色
                                    { offset: 1, color: '#0061ce' } // 1 结束颜色
                                ]
                                )
                            }
                        },
                        { value: 100, itemStyle: { color: '#12274d' } },
                        { value: 200, itemStyle: { color: 'transparent' } }
                        ]
                    }
                ]
            };
            console.log(echartsObj, option2);
            echartsObj.setOption(option2);
        })()

    </script>
    <!-- 热销排行 -->
    <script>
        // 排行切换效果
        var topArr = [
            { name: '可爱多', num: '9,086' },
            { name: '娃哈哈', num: '8,341' },
            { name: '喜之郎', num: '7,407' },
            { name: '八喜', num: '6,080' },
            { name: '小洋人', num: '6,724' },
            { name: '好多鱼', num: '2,170' },
        ]

        // 1. 给所有li绑定鼠标移入事件
        $(".top .sup li").mouseenter(function () {
            clearInterval(topTimer);
            topIndex = $(this).index();
            randArrAndCreateLi(this);
        }).mouseleave(function () {
            createTopTimer();
        })

        // 6. 数据打乱 - 重新铺设页面
        function randArrAndCreateLi(overLi) {
            // 如果当前已经是高亮的了, 就不要再重新随机数组和创建标签了
            if ($(overLi).hasClass("active")) return;

            // 2. 高亮
            $(overLi).addClass("active").siblings().removeClass("active");
            // 3. 每次都要打乱数组
            // 方式1: 随机放入另一个 - 然后原数组删一个
            // 思路: topArr -> 生成一个新的打乱后的数组
            // topArr克隆(深度)一份brr -> 每次循环时, 随机取一个, 放入(push)到新数组crr中 (原数组brr里取出后要删除掉)
            // var brr = []; // 为了移花接木准备的数组
            // var crr = []; // 以后要用的乱序的数组
            // $.extend(true, brr, topArr);
            // var length = brr.length;
            // for (var i = 0; i < length; i++) {
            //     //  产生随机下标(注意范围是当前brr的长度-1)
            //     var index = Math.floor(Math.random() * (brr.length - 1 - 0 + 1)) + 0;
            //     crr.push(brr[index]); // 用随机的下标从brr里取出一个对象放入到crr中
            //     // (重要)用过brr的这个值就得删除(防止下次在取到它)
            //     brr.splice(index, 1);
            // }

            // 方式2: sort排序
            var brr = [];
            $.extend(true, brr, topArr);
            brr.sort(function () {
                return 0.5 - Math.random();
            });
            // brr.sort() 排序的
            // 在函数体里, return 正数 - 交换当前遍历的相邻2个值
            // return 负数 - 不会交换

            // 3. 循环topArr, 为每个对象数据 - 创建标签结构承载数据
            $(".top .sub").html("");
            brr.forEach(function (obj) {
                var theLi = $(`<li><span>${obj.name}</span><span> ${obj.num}<s class="icon-up"></s></span></li>`);
                $(".top .sub").append(theLi);
            });
        }

        // 4. 让网页刚打开, JS主动触发一次事件, 让页面铺设数据
        $(".top .sup li").eq(0).mouseenter();
        // 5. 自动切换的计时器
        var topIndex = 0;
        var topTimer;
        function createTopTimer() {
            topTimer = setInterval(function () {
                topIndex++;
                if (topIndex == $(".top .sup li").length) {
                    topIndex = 0;
                }
                randArrAndCreateLi($(".top .sup li")[topIndex]);
            }, 2000);
        }
        createTopTimer();



        var arr = [1, 2, 3, 4];
        var brr = [];
        arr.forEach(function (val) {
            brr.push(val);
        });
        // arr和brr之间是 -> 什么拷贝 深拷贝
        // 1,2,3,4 和val之间的赋值动作 只是值复制, 没有深浅拷贝问题


        var arr = [
            {
                name: "小传",
                grade: [100, 100, 100]
            },
            {
                name: "小马",
                grade: [90, 90, 95]
            }
        ];
        var brr = [];
        arr.forEach(function(obj){
            var theObj = {};
            for (var key in obj) {
                theObj[key] = obj[key];
            }
            brr.push(obj);
        });
        brr[0].grade[0] = 99;
        console.log(arr);

        // arr 和 brr之间 是 (深拷贝)
        // theObj - 只是对象本身的二层深拷贝 (但是 对象里的那个数组还是浅拷贝 (看=))
    </script>
</body>

</html>